<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 对象的取值拦截和赋值拦截

    // 简单,缺点:只能在声明对象数据时,添加取值拦截和赋值拦截
    // var defaultA = 1;
    // var obj = {
    //     a: 1,
    //     b: 2,
    //     // 取值拦截
    //     get a() {
    //         console.log("取值拦截");
    //         return defaultA;
    //     },
    //     // 赋值拦截
    //     set a(val) {
    //         console.log("赋值拦截", val);
    //         defaultA = val;
    //     }
    // };

    // Object.defineProperty(target,key,desc)
    var defaultA = 1;
    var obj = {
        a: 1,
        b: 2,
    };
    // 给属性添加修饰
    // Object.defineProperty(obj, "a", {
    //     value: 1,  //属性的值
    //     writable: true, // 属性是否可以修改
    //     enumerable: true, // 属性是否可以枚举(遍历)
    //     configurable: true, // 属性是否可以配置/删除
    // })

    // 给属性设置拦截器
    Object.defineProperty(obj, "a", {
        enumerable: true, // 属性是否可以枚举(遍历)
        configurable: true, // 属性是否可以配置/删除
        //  取值拦截
        get: function () {
            console.log("取值拦截");
            return defaultA;
        },
        // 赋值拦截
        set: function (val) {
            console.log("赋值拦截");
            defaultA = val;
        }
    })


    console.log(obj);
    console.log(obj.a);

    obj.a = 100;


</script>

</html>